<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="border: 1px solid black;">
		<div>
			键码：键盘上的任意键
			字符编码：键盘上可以输出的字符地键。
			
			键码返回的是ASCII的小写字母对应的，键码只是返回那个键的值，
			不认识字母大小写键码在字符上和字符编码的ascii是一致的。
			注意：
			keypress事件返回keyCode在火狐下只会返回0，在谷歌和ie下支持且区分大小写
			分号在不同浏览器下返回结果不同
		
			charCode在使用onkeypress在谷歌和火狐支持，ie和opera不支持
			
			事件流：描述的是从页面接受事件的顺序当几个都具有事件的元素层叠在一起的时候，
			那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件而层叠在你点击范围的所有元素都会触发事件。
			事件流：冒泡和捕获两种模式。
		</div>
		<div id="box" style="width: 200px;height: 280px;background: red;">
			测试区域
			<input type="button" name="" id="" value="按钮" />
		</div>
	</body>
	<script>
	//键码
		/*document.onkeydown = function(event){
			var e = event||window.event;
			alert(e.keyCode);  //放回键码（onkeydown事件字母不区分大小写）
		}*/
		
	/*	//字符编码
		document.onkeypress = function(eve){
			var e = eve||window.event;
			alert(e.charCode);
		}*/
		
		//兼容浏览器放回字符编码且区分大小写
		document.onkeypress = function(eve){
			alert(getCharCode(eve));//返回编码值
			alert(String.fromCharCode(getCharCode(eve)));//返回编码
		}
		//兼容浏览器
		function getCharCode(eve){
			var e=eve||window.event;
			if(typeof e.charCode=='number'){
				return e.charCode;
			}else{
				return e.keyCode;
			}
		}
		
		
		//其他事件
		
		//获取点击的当前目标元素
		document.onclick = function(eve){
			var e = eve||window.event;
			alert(e.target);//点击那里就返回那里的dom元素对象
			alert(e.target.tagName);//ie不支持target
			alert(e.srcElement);//  ie属性srcElement
			
			alert(getTarget(eve));
		}
		
		//兼容方法
		function getTarget(eve){
			var e = eve||window.event;
			return e.target||e.srcElement;
		}
		
		//事件冒泡是从里往外逐个触发  input 
		//事件捕获是从外往里逐个触发  document
		//   window>document>html>body>div>input  嵌套
		
		//现代浏览器默认都是冒泡模型
		
		window.onload = function(){
			document.onclick =function(){
				alert('document');
			};
			document.documentElement.onclick = function(){
				alert('html');
			};
			document.body.onclick =function(){
				alert('body');
			};
			document.getElementById("box").onclick=function(){
				alert('div');
			};
			document.getElementsByTagName('input')[0].onclick =function(eve){
				var e =eve||window.event
				alert('input');
				//e.stopPropagation();//取消事件冒泡
				//e.cancelBubble =true;//IE
				setStop(eve)
			}
		};
		
		
		//取消冒泡事件兼容方法
		function setStop(eve){
			var e= eve||window.event;
		
		//(typeof e.stopPropagation=='function')?e.stopPropagation():e.cancelBubble =true;
		
		window.event?e.cancelBubble =true:e.stopPropagation();
		
		}
	</script>
</html>
